<script setup>
import {reactive,ref} from "vue";
import {useRouter} from "vue-router"
import { Search } from '@element-plus/icons-vue'
let router = useRouter();
const rules = reactive({

})

let To_be_collected=ref({})
let formRef=ref()


let isVisible=ref(false)
let title=ref("")
let data=ref({})

let to_be_collected_id=ref([])

let page=ref({
    current:1,
    size:2,
    total:0,
    records:[{"to_be_collected_id":1,"to_be_collected_employee_id":"1",
            "to_be_collected_quotation_id":"1","to_be_collected_batch":"第一次",
            "to_be_collected_receivable":9000,"to_be_collected_collection":5000,
            "to_be_collected_money":4000,"to_be_collected_timing_of_collections":"2025-8-1",
            "quotation_original_sale_price":"10000","quotation_sales_actually":10000,
            "quotation_discount_amount":1000,"quotation_the_amount_is_capitalized":"伍仟元",
            "quotation_the_amount_of_the_sale":8100,"quotaition_date_of_signing":"2025-7-31",
            "customer_resources_settlement_period":"月结","quotation_state":"进行中",
            "customer_resources_credit_limit":100000,"to_be_collected_next_time":"2025-8-15"
        }]
})

let toRemove=()=>{
    alert("删除")
    // request({
    //     //查询客户
    //     url:"",
    //     method:"delete",
    //     data:to_be_collected_id.value
    // }).then(res=>{
    // })
}
//修改
let toUpdate=(id)=>{
    title.value="修改"
    isVisible.value=true;
    if(id!=null){
        data.value=id;
    }else{
        data.value=to_be_collected_id.value;
    }
    // request({
    //     //查询客户
    //     url:"",
    //     method:"put",
    //     data:shipment_history_id.value
    // }).then(res=>{
    //     data.value=res.value
    // })
    
    router.push("/sale/Collection/update");
}

let refTanle=()=>{
    isVisible.value=false;
}
//重置
let shuaxin=()=>{
    formRef.value.resetFields();
}
//新增
let toInsert=()=>{
    title.value="申请收款";
    isVisible.value=true;
    router.push("/sale/Collection/insert");
}

//选择框事件
let fuxuankuang=(a)=>{
    to_be_collected_id.value = a.map(b => b.to_be_collected_id)
}

let location=()=>{
    alert("查询");
    // request({
    //     //查询客户
    //     url:"",
    //     method:"get",
    //     params:{
    //         current:page.value.current,
    //         size:page.value.size,
    //         ...Customer_Resources.value
    // }
    // }).then(res=>{
    //     page.value=res.value
    // })
}

location();
</script>

<template>
    <div>
        <el-card>
            <template #header>
                <el-form ref="formRef" inline :model="To_be_collected" style="display: flex;justify-content: start;" class="card_wrap">
                    <el-form-item label="收款编码" prop="to_be_collected_id" class="c_item">
                        <el-input v-model="To_be_collected.to_be_collected_id" class="sousuo" placeholder="请输入单号"></el-input>
                    </el-form-item>
                    <el-form-item label="申请收款员工" prop="to_be_collected_employee_id" class="c_item">
                          <el-select class="sousuo"v-model="To_be_collected.to_be_collected_employee_id">
                            <!-- <el-option v-for="item in customers" :label="item.name" :value="item.id" /> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报价单编码" prop="to_be_collected_quotation_id" class="c_item">
                        <el-input class="sousuo" placeholder="请输入单号" v-model="To_be_collected.to_be_collected_quotation_id"></el-input>
                    </el-form-item>
                    <el-form-item label="收款时间" prop="to_be_collected_timing_of_collections" class="c_item">
                        <el-date-picker v-model="To_be_collected.to_be_collected_timing_of_collections" size="default" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item  class="c_item">
                        <template #default>
                             <el-button type="primary" @click="location">搜索</el-button>
                            <el-button type="info" :plain=true @click="shuaxin">重置</el-button><p></p>
                        </template>
                    </el-form-item>
                </el-form>

                <div style="margin: 20px 0px;">
                    <el-button @click="toInsert" type="primary" :plain="true">+添加</el-button>
                    <el-button type="success" :plain=true @click="toUpdate" style="border:0px" :disabled="to_be_collected_id.length!=1">修改</el-button>
                    <el-button type="danger" :plain=true @click="toRemove" style="border:0px" :disabled="!to_be_collected_id.length">删除</el-button>
                    <el-button type="info" :plain=true @click="" style="border:0px">导出</el-button>
                </div>

                <el-table :data="page.records" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" :border="true"  @selection-change="fuxuankuang" show-overflow-tooltip>
                    <el-table-column type="selection" width="55"/>
                    <el-table-column prop="to_be_collected_id" label="收款编码" width="110px;"/>
                    <el-table-column prop="to_be_collected_employee_id" label="申请收款员工" width="120px;"/>
                    <el-table-column prop="to_be_collected_quotation_id" label="报价单编码" width="100px;"/>
                    <el-table-column prop="to_be_collected_batch" label="批次收款" width="100px;"/>
                    <el-table-column prop="to_be_collected_receivable" label="应收金额" width="100px;"/>
                    <el-table-column prop="to_be_collected_collection" label="收款金额" width="90px;"/>
                    <el-table-column prop="to_be_collected_money" label="代收款金额" width="110px;"/>
                    <el-table-column prop="to_be_collected_timing_of_collections" label="收款时间" width="100px;"/>
                    <el-table-column prop="quotation_original_sale_price" label="销售原价总额" width="110px;"/>
                    <el-table-column prop="quotation_sales_actually" label="销售实际金额" width="110px;"/>
                    <el-table-column prop="quotation_discount_amount" label="优惠金额" width="90px;"/>
                    <el-table-column prop="quotation_the_amount_is_capitalized" label="金额大写" width="100px;"/>
                    <el-table-column prop="quotation_the_amount_of_the_sale" label="销售金额（不含税）" width="100px;"/>
                    <el-table-column prop="quotaition_date_of_signing" label="签订时间" width="100px;"/>
                    <el-table-column prop="customer_resources_settlement_period" label="结算期限" width="100px;"/>
                    <el-table-column prop="quotation_state" label="状态" width="100px;"/>
                    <el-table-column prop="customer_resources_credit_limit" label="信用额度/员" width="110px;"/>
                    <el-table-column prop="to_be_collected_next_time" label="预计下次收款时间" width="140px;"/>
                    <el-table-column label="操作" width="120px;" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" @click="toUpdate(scope.row.id)" :row="scope.row.id">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-dialog
                    :title="title"
                    v-model="isVisible"
                    :destroy-on-close="true"
                    width="60%">
                    <router-view @ref-table="refTanle" :data="data">
                    </router-view>
                </el-dialog>
            </template>
            
        </el-card>
       
    </div>
</template>

<style scoped>
.sousuo{
    width:200px;
    /* margin-right: 100px; */
}
.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.c_item{
    flex:1;
    margin:0px 5px 15px 0;
    width: calc((100%-10px)/3);
    min-width:calc((100% - 10px)/3);
    max-width:calc((100% - 10px)/3);
    &:nth-child(3n){
        margin-right:0;
    }
}
[m='4'] :deep(.el-table){
    --el-table-border-color: transparent
}
:deep(.el-tooltip):hover{
    cursor: pointer;
}
</style>